<template>
  <el-container class="home-container">
    <el-header>
      <div>
        <img src="../assets/image/logo.png" />
        <span>梓晨影院后台管理系统</span>
      </div>
      <div>

        <el-icon style="cursor: pointer;" @click="dialogVisible=!dialogVisible"><Bell /></el-icon>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar :src="userInfo.avatar" />
            {{ userInfo.managerName }}
            <el-icon>
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="basicInfo">
                基本信息
              </el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>


      <!-- <el-button v-if="logStatus" type="info" @click="logout">退出</el-button>
      <el-button v-else type="primary" @click="login">登录</el-button> -->
    </el-header>

    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <keep-alive>
          <el-menu background-color="#373d41" text-color="#fff" active-text-color="#409fff" :unique-opened="true"
            :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
            <treeMenu :menuData="menuList" />
          </el-menu>
        </keep-alive>
      </el-aside>
      <el-main class="contain-main">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <el-tag @close="closeTag(tag,index)" v-for="(tag,index) in tags" :key="tag.name" :closable="index != 0?true:false"
         :type="tag.path == route.path ? 'primary' : 'info'"
          style="margin-left: 8px;margin-bottom: 5px;">
          <RouterLink :to="tag.path">{{ tag.name }}</RouterLink> 
        </el-tag>

        <Chat :dialogVisible @update:visible="updateVisible"/>

        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
import { useRouter,useRoute } from 'vue-router'
import treeMenu from "@/components/TreeMenu.vue";
import Chat from "./system/Chat.vue";

    const store = useStore();
    const router = useRouter()
    const route = useRoute()
    console.log('home', route)
    let userInfo = JSON.parse(localStorage.getItem("userInfo"))
    let menuList = reactive([]);
    let activePath = ref(sessionStorage.getItem("activePath"));
    let currentRoute = reactive(router.currentRoute.value)
    store.commit('tags/SET_MENU', currentRoute)

    let dialogVisible = ref(false)

    function updateVisible(){
      dialogVisible.value = false
    }

    const getMenuList = function () {
      menuList = JSON.parse(localStorage.getItem("menuList"));
      console.log('menuList', menuList)
    };

    getMenuList()
    //菜单默认不折叠
    //菜单列表数据
    //当前高亮菜单项
    let isCollapse = ref(false);

    //当前选中的菜单项
    console.log('routepath', router.currentRoute)
    let nowRoute = router.currentRoute.value
    sessionStorage.setItem("activePath", nowRoute.path);
    activePath.value = nowRoute.path;


    const tags = reactive(store.state.tags.tagList);

    function closeTag(item,index){
     if(index == 0){
      return
     }
     store.commit('tags/CLOSE_TAG', item)
     const tagList = tags
     //如果删除的是当前页
      if(item.path == route.path){
         //如果删除的是最后一项
         if(index == tagList.length) {
          router.push({path:tagList[index-1].path})
         }
         else{
          router.push({path:tagList[index].path})
        }
         }
      
    }
    function handleCommand(command){
      if(command == 'basicInfo'){
        router.push({path:'/userInfo'})
        store.commit('tags/SET_MENU',{name:"基本信息",path:'/userInfo'})

      }
      else if(command == 'logout'){
        logout()
      }
      
    }
    function toChat(){
      dialogVisible.value = true
    }
    //点击按钮切换侧边栏的折叠和展开
    const toggleCollapse = function () {
      isCollapse.value = !isCollapse.value;
    };
    //点击二级菜单，文字高亮
    const highLight = function (item) {
      console.log("route", route);
      sessionStorage.setItem("activePath", item.path);
      activePath.value = item.path;
    };
    const logout = function () {
      // store.state.tags.tagList = []
      sessionStorage.clear();
      localStorage.clear();
      router.push("/login");
    };
    const login = function () {
      router.push("/login");
    };

</script>

<style lang="less" scoped>
.contain-main{
  a{
    height: 100%;
    color:black;
    text-decoration: none;
  }
}
.home-container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  padding-left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 20px;

  div {
    display: flex;
    align-items: center;

    img {
      width: 112px;
      margin-right: 20px;
    }
  }
}

.el-aside {
  background-color: #333744;
}

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: white;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-menu {
  border-right: none;
  height: calc(100% - 24px); //减号两边一定要加空格
}

.el-dropdown span {
  color: white;
  margin-left: 10px;
  cursor: pointer;
}
</style>